/**
 * 学习目标：React事件中this的指向问题，解决方案
 * 原理：箭头函数，根据所在的环境自动绑定this
 * 方案1：class箭头函数方法 - 推荐 👍
 * 方案2：render中使用箭头函数
 * 方案3：bind修改this指向
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    msg: 'react',
  };

  // React非自带结构体，this默认指向undefined
  // 方案1：class箭头函数方法 - 推荐
  handleClick = () => {
    console.log('handleClick中的this -----> ', this);
  };

  // 普通函数中，谁调用，那么this就指向谁
  handleXxx() {
    console.log('handleXxx中的this -----> ', this);
  }
  // React自带结构体中，this指向正确: React源码内部处理过
  render() {
    console.log('render中的this -----> ', this);
    return (
      <>
        <button onClick={this.handleClick}>点我获取state的数据</button>
        {/* 方案2：render中使用箭头函数 */}
        <button
          // render 中，this指向App，这里就等于 App.handleXxx()
          onClick={() => this.handleXxx()}
        >
          handleXxx点我获取state的数据
        </button>

        {/* 💥bind修改this指向，不建议使用  */}
        {/* apply/call 是直接调用，bind会把改变this之后的函数返回 */}
        <button onClick={this.handleXxx.bind(this)}>
          bind点我获取state的数据
        </button>
      </>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
